<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sora-Uniapp 项目介绍</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        dark: '#020120',
                        darkLight: '#171630',
                        accent: '#8b5cf6'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(10px);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-dark to-darkLight text-white min-h-screen">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-glass">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                    <i class="fa fa-play-circle-o text-xl"></i>
                </div>
                <h1 class="text-xl font-bold">Sora-Uniapp</h1>
            </div>
            <div class="hidden md:flex gap-8">
                <a href="#overview" class="hover:text-primary transition-colors">项目概述</a>
                <a href="#features" class="hover:text-primary transition-colors">功能特性</a>
                <a href="#structure" class="hover:text-primary transition-colors">文件结构</a>
                <a href="#usage" class="hover:text-primary transition-colors">使用方法</a>
                <a href="#tech" class="hover:text-primary transition-colors">技术特点</a>
            </div>
            <div class="md:hidden">
                <button id="menu-toggle" class="text-white focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-darkLight absolute w-full">
            <div class="container mx-auto px-4 py-4 flex flex-col gap-4">
                <a href="#overview" class="py-2 hover:text-primary transition-colors">项目概述</a>
                <a href="#features" class="py-2 hover:text-primary transition-colors">功能特性</a>
                <a href="#structure" class="py-2 hover:text-primary transition-colors">文件结构</a>
                <a href="#usage" class="py-2 hover:text-primary transition-colors">使用方法</a>
                <a href="#tech" class="py-2 hover:text-primary transition-colors">技术特点</a>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <header class="pt-28 pb-20 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-center justify-between gap-12">
                <div class="md:w-1/2">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight">
                        <span class="bg-gradient-to-r from-primary to-accent text-gradient">Sora-Uniapp</span>
                        <br>最强AI视频生成应用
                    </h1>
                    <p class="mt-6 text-lg text-gray-300 max-w-xl">
                        基于Uniapp开发的多端兼容AI视频生成应用，集成Sora-2 API，提供丰富的视频生成和管理功能。
                    </p>
                    <div class="mt-8 flex gap-4">
                        <a href="#usage" class="px-6 py-3 bg-primary rounded-lg font-medium hover:bg-primary/90 transition-all transform hover:scale-105">
                            开始使用
                        </a>
                        <a href="#features" class="px-6 py-3 border border-gray-600 rounded-lg font-medium hover:bg-white/5 transition-all">
                            了解功能
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="relative">
                        <div class="absolute -top-4 -left-4 w-full h-full bg-gradient-to-tr from-primary/30 to-accent/30 rounded-2xl blur-xl"></div>
                        <img src="README.assets/bg-cover.png" alt="Sora-Uniapp" class="w-full max-w-md mx-auto rounded-2xl relative z-10 border-2 border-white/10 shadow-2xl">
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 项目概述 -->
    <section id="overview" class="py-20 px-4">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">项目概述</h2>
                <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
            </div>
            
            <div class="bg-glass rounded-2xl p-8 shadow-xl border border-white/10">
                <p class="text-lg leading-relaxed">
                    Sora-Uniapp是一款基于Uniapp框架开发的AI视频生成应用前端，支持一套代码多端兼容（微信小程序、H5、App等）。该项目集成了Sora-2 API，为用户提供强大的AI视频生成功能，包括文生视频、提示词优化、作品管理等核心功能。
                </p>
                
                <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-darkLight/50 p-6 rounded-xl border border-white/5 hover:border-primary/30 transition-all">
                        <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                            <i class="fa fa-code-fork text-2xl text-primary"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">多端兼容</h3>
                        <p class="text-gray-400">一套代码适配微信小程序、H5、App等多端平台</p>
                    </div>
                    
                    <div class="bg-darkLight/50 p-6 rounded-xl border border-white/5 hover:border-primary/30 transition-all">
                        <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                            <i class="fa fa-magic text-2xl text-primary"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">AI视频生成</h3>
                        <p class="text-gray-400">集成Sora-2 API，支持文本生成高质量视频内容</p>
                    </div>
                    
                    <div class="bg-darkLight/50 p-6 rounded-xl border border-white/5 hover:border-primary/30 transition-all">
                        <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                            <i class="fa fa-user-circle-o text-2xl text-primary"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">完整用户系统</h3>
                        <p class="text-gray-400">会员体系、算力充值、作品管理等完善功能</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特性 -->
    <section id="features" class="py-20 px-4 bg-darkLight/30">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">功能特性</h2>
                <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
                <p class="mt-6 text-gray-400 max-w-2xl mx-auto">
                    Sora-Uniapp提供丰富的功能模块，满足用户从视频生成到管理的全流程需求
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 视频生成功能 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center">
                            <i class="fa fa-film text-2xl text-primary"></i>
                        </div>
                        <h3 class="text-2xl font-bold">视频生成功能</h3>
                    </div>
                    
                    <ul class="space-y-4">
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>支持文生视频，可生成10秒/15秒/25秒视频</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>提示词优化，一键生成符合Sora要求的专业提示词</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>支持上传参考图片，提升视频生成质量</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>支持选择视频比例（16:9和9:16）</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>提供常规模式和广告创意模式</span>
                        </li>
                    </ul>
                </div>

                <!-- 用户管理功能 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                            <i class="fa fa-users text-2xl text-accent"></i>
                        </div>
                        <h3 class="text-2xl font-bold">用户管理功能</h3>
                    </div>
                    
                    <ul class="space-y-4">
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>用户登录注册系统</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>会员体系（月卡、年卡、季度卡）</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>算力充值功能</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>卡密兑换功能</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>用户邀请码系统</span>
                        </li>
                    </ul>
                </div>

                <!-- 作品管理功能 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
                            <i class="fa fa-th-large text-2xl text-blue-500"></i>
                        </div>
                        <h3 class="text-2xl font-bold">作品管理功能</h3>
                    </div>
                    
                    <ul class="space-y-4">
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>查看生成历史记录</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>视频预览和下载功能</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>作品分享功能</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>历史素材管理和复用</span>
                        </li>
                    </ul>
                </div>

                <!-- 其他功能 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
                            <i class="fa fa-cogs text-2xl text-purple-500"></i>
                        </div>
                        <h3 class="text-2xl font-bold">其他功能</h3>
                    </div>
                    
                    <ul class="space-y-4">
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>广告集成（支持微信广告）</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>客服联系功能</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>帮助文档和使用指南</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <i class="fa fa-check-circle text-green-500 mt-1"></i>
                            <span>关于我们页面</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 文件结构 -->
    <section id="structure" class="py-20 px-4">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">文件结构</h2>
                <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
                <p class="mt-6 text-gray-400 max-w-2xl mx-auto">
                    项目采用模块化结构设计，代码组织清晰，易于维护和扩展
                </p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 核心文件 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10">
                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                        <i class="fa fa-file-code-o text-primary"></i>核心文件
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-2">
                            <span class="text-primary">App.vue</span>
                            <span class="text-gray-400">应用入口组件</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">main.js</span>
                            <span class="text-gray-400">应用入口文件</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">manifest.json</span>
                            <span class="text-gray-400">应用配置文件</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">pages.json</span>
                            <span class="text-gray-400">页面路由配置</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">uni.scss</span>
                            <span class="text-gray-400">全局样式文件</span>
                        </li>
                    </ul>
                </div>

                <!-- 组件目录 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10">
                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                        <i class="fa fa-puzzle-piece text-primary"></i>组件目录
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-2">
                            <span class="text-primary">mp-html/</span>
                            <span class="text-gray-400">HTML富文本解析组件</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">y-bottom/</span>
                            <span class="text-gray-400">底部固定组件</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">y-download/</span>
                            <span class="text-gray-400">下载组件</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">y-nav/</span>
                            <span class="text-gray-400">导航栏组件</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">y-popup/</span>
                            <span class="text-gray-400">弹窗组件</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">y-user/</span>
                            <span class="text-gray-400">用户相关组件</span>
                        </li>
                    </ul>
                </div>

                <!-- 页面目录 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10">
                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                        <i class="fa fa-file-text-o text-primary"></i>页面目录
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-2">
                            <span class="text-primary">index/</span>
                            <span class="text-gray-400">首页，视频生成功能</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">article/</span>
                            <span class="text-gray-400">文章页面</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">material/</span>
                            <span class="text-gray-400">历史素材页面</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">user/</span>
                            <span class="text-gray-400">用户中心页面</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">works/</span>
                            <span class="text-gray-400">作品管理页面</span>
                        </li>
                    </ul>
                </div>

                <!-- 工具类 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10">
                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                        <i class="fa fa-wrench text-primary"></i>工具类
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-2">
                            <span class="text-primary">http.js</span>
                            <span class="text-gray-400">网络请求工具</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">page.js</span>
                            <span class="text-gray-400">页面跳转工具</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">pay.js</span>
                            <span class="text-gray-400">支付相关功能</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">storeage.js</span>
                            <span class="text-gray-400">本地存储工具</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">system.js</span>
                            <span class="text-gray-400">系统信息工具</span>
                        </li>
                    </ul>
                </div>

                <!-- 状态管理 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10">
                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                        <i class="fa fa-database text-primary"></i>状态管理
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-2">
                            <span class="text-primary">index.js</span>
                            <span class="text-gray-400">状态管理入口</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">user.js</span>
                            <span class="text-gray-400">用户状态管理</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">webconfig.js</span>
                            <span class="text-gray-400">网站配置管理</span>
                        </li>
                    </ul>
                </div>

                <!-- 静态资源 -->
                <div class="bg-glass rounded-2xl p-8 border border-white/10">
                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                        <i class="fa fa-file-image-o text-primary"></i>静态资源
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-2">
                            <span class="text-primary">iconfont.css</span>
                            <span class="text-gray-400">图标字体样式</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">image/</span>
                            <span class="text-gray-400">图片资源目录</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">logo.png</span>
                            <span class="text-gray-400">应用Logo</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <span class="text-primary">y.scss</span>
                            <span class="text-gray-400">主要样式文件</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用方法 -->
    <section id="usage" class="py-20 px-4 bg-darkLight/30">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">使用方法</h2>
                <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
                <p class="mt-6 text-gray-400 max-w-2xl mx-auto">
                    按照以下步骤快速开始使用Sora-Uniapp项目
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <!-- 开发环境准备 -->
                <div>
                    <div class="bg-glass rounded-2xl p-8 border border-white/10 h-full">
                        <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                            <span class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">1</span>
                            开发环境准备
                        </h3>
                        <ol class="list-decimal list-inside space-y-4 pl-4">
                            <li class="text-gray-300">安装HBuilderX或其他支持Uniapp的开发工具</li>
                            <li class="text-gray-300">克隆项目代码到本地</li>
                            <li class="text-gray-300">安装项目依赖</li>
                            <li class="text-gray-300">配置API接口地址（在utils/system.js中修改）</li>
                        </ol>
                    </div>
                </div>

                <!-- 运行项目 -->
                <div>
                    <div class="bg-glass rounded-2xl p-8 border border-white/10 h-full">
                        <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                            <span class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">2</span>
                            运行项目
                        </h3>
                        <ol class="list-decimal list-inside space-y-4 pl-4">
                            <li class="text-gray-300">在HBuilderX中点击运行，选择对应平台</li>
                            <li class="text-gray-300">微信小程序：需配置微信开发者工具路径</li>
                            <li class="text-gray-300">H5：可直接在浏览器中预览</li>
                            <li class="text-gray-300">App：需配置相应的SDK</li>
                        </ol>
                    </div>
                </div>

                <!-- 打包部署 -->
                <div>
                    <div class="bg-glass rounded-2xl p-8 border border-white/10 h-full">
                        <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                            <span class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">3</span>
                            打包部署
                        </h3>
                        <ol class="list-decimal list-inside space-y-4 pl-4">
                            <li class="text-gray-300">在HBuilderX中选择发行，根据目标平台选择相应的打包方式</li>
                            <li class="text-gray-300">小程序需配置AppID</li>
                            <li class="text-gray-300">App端需配置签名和证书</li>
                            <li class="text-gray-300">H5端可直接部署到静态服务器</li>
                        </ol>
                    </div>
                </div>

                <!-- API对接 -->
                <div>
                    <div class="bg-glass rounded-2xl p-8 border border-white/10 h-full">
                        <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
                            <span class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">4</span>
                            API对接
                        </h3>
                        <ol class="list-decimal list-inside space-y-4 pl-4">
                            <li class="text-gray-300">前端已完整实现所有功能界面</li>
                            <li class="text-gray-300">需对接Sora-2 API接口</li>
                            <li class="text-gray-300">API目前免费开放，截止时间待定</li>
                            <li class="text-gray-300">后端可使用PHP基于xhadmin框架开发</li>
                        </ol>
                    </div>
                </div>
            </div>

            <!-- 界面预览 -->
            <div class="mt-16">
                <h3 class="text-2xl font-bold mb-8 text-center">界面预览</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="relative overflow-hidden rounded-2xl">
                        <img src="README.assets/5968e08c4815404344fa34248e1b464.jpg" alt="界面预览1" class="w-full h-auto rounded-2xl border border-white/10 hover:scale-105 transition-transform duration-500">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
                            <p class="text-white font-medium">视频生成界面</p>
                        </div>
                    </div>
                    <div class="relative overflow-hidden rounded-2xl">
                        <img src="README.assets/e01c02d7b1a5633de9794d83736f6941.jpg" alt="界面预览2" class="w-full h-auto rounded-2xl border border-white/10 hover:scale-105 transition-transform duration-500">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
                            <p class="text-white font-medium">作品展示界面</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术特点 -->
    <section id="tech" class="py-20 px-4">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">技术特点</h2>
                <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all group">
                    <div class="w-16 h-16 bg-primary/20 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa fa-cubes text-3xl text-primary"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">多端兼容</h3>
                    <p class="text-gray-400">
                        基于Uniapp框架开发，一套代码可在微信小程序、H5、App等多端运行，大大提高开发效率。
                    </p>
                </div>

                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all group">
                    <div class="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa fa-paint-brush text-3xl text-accent"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">现代UI设计</h3>
                    <p class="text-gray-400">
                        采用深色主题设计，界面美观且专业，提供良好的用户体验，UI元素精心设计，交互流畅。
                    </p>
                </div>

                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all group">
                    <div class="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa fa-sitemap text-3xl text-blue-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">模块化结构</h3>
                    <p class="text-gray-400">
                        组件化开发，代码结构清晰，易于维护和扩展，各功能模块职责明确，便于团队协作。
                    </p>
                </div>

                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all group">
                    <div class="w-16 h-16 bg-green-500/20 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa fa-database text-3xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">状态管理</h3>
                    <p class="text-gray-400">
                        使用Pinia进行状态管理，管理用户信息、系统配置等全局状态，状态流转清晰。
                    </p>
                </div>

                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all group">
                    <div class="w-16 h-16 bg-yellow-500/20 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa fa-mobile text-3xl text-yellow-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">响应式布局</h3>
                    <p class="text-gray-400">
                        适配不同屏幕尺寸，从手机到平板设备，提供一致的用户体验，界面元素自适应调整。
                    </p>
                </div>

                <div class="bg-glass rounded-2xl p-8 border border-white/10 hover:shadow-lg transition-all group">
                    <div class="w-16 h-16 bg-red-500/20 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa fa-check-circle text-3xl text-red-500"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">完善用户体验</h3>
                    <p class="text-gray-400">
                        包含加载状态、错误处理、用户引导等，提供流畅的操作体验，细节处理到位。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 注意事项 -->
    <section class="py-20 px-4 bg-darkLight/30">
        <div class="container mx-auto">
            <div class="bg-glass rounded-2xl p-8 border border-white/10">
                <h3 class="text-2xl font-bold mb-6">注意事项</h3>
                <ul class="space-y-4">
                    <li class="flex items-start gap-3">
                        <i class="fa fa-exclamation-circle text-yellow-500 mt-1"></i>
                        <span>API接口目前免费开放，截止时间待定</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa fa-exclamation-circle text-yellow-500 mt-1"></i>
                        <span>视频生成需遵循相关规定，图片不可含人物，否则视频生成会失败</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa fa-exclamation-circle text-yellow-500 mt-1"></i>
                        <span>后端代码为付费产品，可自行开发替代方案</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fa fa-exclamation-circle text-yellow-500 mt-1"></i>
                        <span>使用前请确保已获取必要的权限，特别是相机和存储权限</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-20 px-4">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">联系我们</h2>
                <div class="w-20 h-1 bg-primary mx-auto mt-4 rounded-full"></div>
                <p class="mt-6 text-gray-400 max-w-2xl mx-auto">
                    如有疑问或建议，请随时联系我们
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl mx-auto">
                <div class="bg-glass rounded-2xl p-8 border border-white/10 flex items-center gap-4">
                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center">
                        <i class="fa fa-envelope text-xl text-primary"></i>
                    </div>
                    <div>
                        <h4 class="font-medium mb-1">Email</h4>
                        <p class="text-gray-400">416716328@qq.com</p>
                    </div>
                </div>

                <div class="bg-glass rounded-2xl p-8 border border-white/10 flex items-center gap-4">
                    <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center">
                        <i class="fa fa-weixin text-xl text-primary"></i>
                    </div>
                    <div>
                        <h4 class="font-medium mb-1">微信/电话</h4>
                        <p class="text-gray-400">18786709420</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="py-10 px-4 bg-darkLight">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center gap-3 mb-6 md:mb-0">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-play-circle-o text-xl"></i>
                    </div>
                    <h2 class="text-xl font-bold">Sora-Uniapp</h2>
                </div>
                <div class="text-gray-500 text-sm">
                    © 2025 Sora-Uniapp. All rights reserved.
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                // 关闭移动端菜单
                document.getElementById('mobile-menu').classList.add('hidden');
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    const navHeight = document.querySelector('nav').offsetHeight;
                    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
                    
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 滚动监听，改变导航栏样式
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 50) {
                nav.classList.add('bg-dark/90');
                nav.classList.remove('bg-glass');
            } else {
                nav.classList.add('bg-glass');
                nav.classList.remove('bg-dark/90');
            }
        });
    </script>
</body>
</html>